<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7"><![endif]-->
<!--[if IE 8]>
<html class="ie ie8"><![endif]-->
<!--[if IE 9]>
<html class="ie ie9"><![endif]-->
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml" lang="ch">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="author" content="Nghia Minh Luong">
    <meta name="keywords" content="Default Description">
    <meta name="description" content="Default keyword">
    <title>我的购物车</title>
    <!-- Fonts-->
    <link rel="stylesheet" th:href="@{/css/fontsgoogleapis.css}">
    <link rel="stylesheet" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/ps-icon/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/plugins/bootstrap/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/owl-carousel/assets/owl.carousel.css}">
    <link rel="stylesheet" th:href="@{/plugins/jquery-bar-rating/dist/themes/fontawesome-stars.css}">
    <link rel="stylesheet" th:href="@{/plugins/slick/slick/slick.css}">
    <link rel="stylesheet" th:href="@{/plugins/bootstrap-select/dist/css/bootstrap-select.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/Magnific-Popup/dist/magnific-popup.css}">
    <link rel="stylesheet" th:href="@{/plugins/jquery-ui/jquery-ui.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/revolution/css/settings.css}">
    <link rel="stylesheet" th:href="@{/plugins/revolution/css/layers.css}">
    <link rel="stylesheet" th:href="@{/plugins/revolution/css/navigation.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/gooddetail.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/font-awesome/css/font-awesome.css}"/>
    <script type="text/javascript" th:src="@{/plugins/jquery/dist/jquery.min.js}"></script>
    <script th:src="@{/js/html5shiv.js}"></script>
    <script th:src="@{/js/respond.min.js}"></script>
    <script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
        var userid = [[${session.userid}]]
    </script>
    <style>
        .price-block {
            width: 300px;
            height: 64px;
            background-color: #50CF96;
            color: #FFFFFF;
            font-family: 黑体;
            font-size: 50px;
        }
    </style>
</head>
<!--[if IE 7]>
<body class="ie7 lt-ie8 lt-ie9 lt-ie10"><![endif]-->
<!--[if IE 8]>
<body class="ie8 lt-ie9 lt-ie10"><![endif]-->
<!--[if IE 9]>
<body class="ie9 lt-ie10"><![endif]-->
<body class="">
<div class="header--sidebar"></div>
<header class="header">
    <div th:include="~{index :: myheader}"></div>
</header>
<div class="header-services">
    <div th:include="~{index :: myhdservices}"></div>
</div>
<main class="ps-main layui-container" id="product_cart">
    <!--购物车-->

    <div class="layui-row" style="text-align: center;">
        <div class="layui-row" style="overflow-x: auto;">
            <div class="layui-col-md12">
                <div class="layui-row">
                    <div class="layui-col-md3"><h1 class="site-h1"><i class="fa fa-gift"
                                                                      style="color:#50CF96 ;"></i>
                        &nbsp;我的购物车</h1></div>
                </div>
                <div class="layui-card">
                    <form class="layui-form">
                        <div class="layui-card-header">
                            <div class="layui-row" style="display: flex;align-items: center">
                                <div class="layui-col-md1" style="margin-bottom: 5px">
                                    <input id="checkAll" type="checkbox" name="check" lay-skin="primary" lay-filter="chooseAll" >
                                </div>
                                <div class="pull-left" style="margin-bottom: 5px;margin-left: -30px">
                                    <label class="" for="checkAll"><p>全选</p></label>
                                </div>
                                <div class="layui-col-md2">
                                    <p>
                                        商品图片
                                    </p>
                                </div>
                                <div class="layui-col-md3">
                                    <p>
                                        商品描述
                                    </p>
                                </div>
                                <div class="layui-col-md3">
                                    <p>
                                        商品价格
                                    </p>
                                </div>
                                <div class="layui-col-md2">
                                    <p>
                                        操作
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card-body" v-if="cartListData.length != 0">
                            <div class="layui-row " v-for="(commodity ,inedx) in cartListData" :key="index">
                                <div class="layui-col-md1 pull-left" style="margin-top: 30px">
                                    <input type="checkbox" name="ids"  lay-filter="chooseOne" lay-skin="primary" :value="commodity.commid" >
                                </div>
                                <div class="layui-col-md2">
                                    <img class=" img-rounded" v-bind:src="commodity.image" alt="商品主图"
                                         style="height: 100px;object-fit: contain">
                                </div>
                                <div class=" layui-col-md3">
                                     <span>
                                         <h4>{{commodity.commname}}</h4>
                                        <small>{{commodity.commdesc}}</small>
                                    </span>
                                </div>
                                <div class="layui-col-md3" style="margin-top: 30px">
                                        <span class="ps-shoe__price"
                                              style="color: rgb(212, 106, 64);font-family: 黑体;font-size:x-large">
                                            ￥ {{ commodity.thinkmoney }}
                                        </span>
                                    <del><small>￥ {{ commodity.orimoney }}</small></del>

                                </div>
                                <div class="layui-col-md2" style="margin-top: 30px">
                                    <a class="layui-btn layui-btn-xs" lay-event="collect">移入收藏</a>
                                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                                </div>
                                <!--分割线-->
                                <hr>
                            </div>
                        </div>
                        <div class="layui-card-body" v-else>
                            <div class="layui-col-md12">
                                <p style="font-size: xxx-large">我的心里空空如也</p>
                            </div>
                        </div>
                        <span class="pull-right price-block">
                                    <h1 class="pull-left" id="price"
                                        style="color:#FFFFFF;margin-left: 20px;margin-top: 13px">￥  0</h1>
                                    <button class="layui-btn layui-btn-lg pull-right" type="button" style="height:64px "
                                            onclick="buy()">立即购买</button>
                            </span>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
<div class="ps-footer bg--cover" data-background="images/background/parallax.jpg">
    <div th:include="~{index :: foot}"></div>
</div>


<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" src="/js/userInfo/cart.js"></script>
</body>
</html>